<template>
  <div class="rightFour">
    <div class="rightThreeLeft">
      <div class="title">
        <div class="titleImg"></div>
        <div>林</div>
      </div>
      <div class="list">
        <div class="item">
          <div id="rightFourChart1" class="echarts-wrap"></div>
          <div>
            <p>森林覆盖率</p>
          </div>
        </div>
        <div class="item">
          <div id="rightFourChart2" class="echarts-wrap"></div>
          <div>
            <p>绿色森林面积</p>
          </div>
        </div>
      </div>
    </div>
    <div class="rightThreeRight">
      <div class="title">
        <div class="titleImg"></div>
        <div>土</div>
      </div>

      <div class="list">
        <div class="item">
          <div id="rightFourChart3" class="echarts-wrap"></div>
          <div>
            <p>总面积</p>
          </div>
        </div>
        <div class="item">
          <div id="rightFourChart4" class="echarts-line-wrap"></div>
          <div>
            <p>省外客流来源</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    let that = this;
    let color = ["rgb(62,61,86)", "#0980BE"];
    let data = [
      { value: 100, name: "森林未覆盖" },
      { value: 425, name: "森林覆盖" },
    ];
    let axis = "80.9%";
    this.createCharts("rightFourChart1", "pie", color, axis, data);
    this.createCharts(
      "rightFourChart2",
      "pie",
      ["rgb(60,213,167)"],
      "217万亩",
      [{ value: 217, name: "绿色森林面积" },{ value: 0, name: "绿色森林面积" }]
    );
    this.createCharts("rightFourChart3", "pie", ["#0980BE"], "54万亩", [
      { value: 54, name: "总面积" },{ value: 0, name: "绿色森林面积" }
    ]);
    let xData = ["01", "02", "03", "04", "05"];
    this.createCharts("rightFourChart4", "pictorialBar", "", "", [], xData);
  },
  methods: {
    creatOptions(type, data) {
      if (type === "pie") {
        return {
          tooltip: {
            trigger: "item",
            formatter: "{b}: {c} ({d}%)",
          },
          grid: {
            top: "0px",
            left: "0px",
            right: "0px",
            bottom: "0px",
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: ["60%", "70%"],
              avoidLabelOverlap: false,
              hoverAnimation: false,
              label: {
                normal: {
                  show: true,
                  position: "center",
                  formatter: function () {
                    return data.axis;
                  },
                  textStyle: {
                    fontSize: 15,
                    color: "#45F4F7",
                  },
                },
                // emphasis: {
                //   show: false,
                //   textStyle: {
                //     fontSize: "30",
                //     fontWeight: "bold",
                //   },
                // },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              tooltip: {
                show: false,
              },
              data: data.chartsData,
            },
          ],
          color: data.color,
        };
      } else {
        return {
          grid: {
            left: "0",
            right: "0",
            bottom: "0",
            top: 7,
            containLabel: true,
          },
          xAxis: {
            splitLine:{show:false},
            axisLine: {
              show: true, // 是否显示坐标轴
              lineStyle:{
                  color:'#34BECB',
                  width:1,//这里是为了突出显示加上的
              }
            },
            axisTick: {
              show: false, //是否显示坐标轴刻度
            },
            axisLabel: {
              //x轴数据颜色
              formatter: "{value}",
              textStyle: {
                color: "#fff",
              },

              interval: 0,
              //rotate: 45, //代表逆时针旋转45度
            },
            data: data.xData,
          },
          yAxis: {
            max: 80,
            show: true,
            splitLine:{show:false},
            axisLine: {
              show: true, // 是否显示坐标轴
              lineStyle:{
                  color:'#34BECB',
                  width:1,//这里是为了突出显示加上的
              }

            },
            axisTick: {
              show: false, //是否显示坐标轴刻度
            },
            axisLabel: {
              //y轴数据颜色
              formatter: "{value}",
              textStyle: {
                color: "#fff",
              },
            },
          },
          series: [
            {
              type: "pictorialBar",
              symbol: "rect",
              symbolSize: [10, 4],
              color: "#7f71e2",
              symbolRepeat: true,
              symbolBoundingData: 80,
              data: [
                {
                  value: 12,
                  itemStyle: {
                    color: "#7f71e2",
                  },
                },
                {
                  value: 11,
                  itemStyle: {
                    color: "#4aa1e1",
                  },
                },
                {
                  value: 13,
                  itemStyle: {
                    color: "#6494db",
                  },
                },
                {
                  value: 45,
                  itemStyle: {
                    color: "#159be4",
                  },
                },
                {
                  value: 74,
                  itemStyle: {
                    color: "#4ebcff",
                  },
                },
              ],
              z: 5,
            },
            {
              type: "pictorialBar",
              itemStyle: {
                normal: {
                  opacity: 0.2,
                  barBorderRadius: 10,
                },
              },
              animationDuration: 0,
              symbolRepeat: "fixed", //使图形元素重复
              symbol: "rect",
              symbolSize: [10, 4],
              symbolBoundingData: 80,
              data: [
                {
                  value: 12,
                  itemStyle: {
                    color: "#7f71e2",
                  },
                },
                {
                  value: 11,
                  itemStyle: {
                    color: "#4aa1e1",
                  },
                },
                {
                  value: 13,
                  itemStyle: {
                    color: "#6494db",
                  },
                },
                {
                  value: 45,
                  itemStyle: {
                    color: "#159be4",
                  },
                },
                {
                  value: 74,
                  itemStyle: {
                    color: "#4ebcff",
                  },
                },
              ],
              z: 2,
            },
          ],
        };
      }
    },
    createCharts(id, type, color, axis, chartsData, xData) {
      let myChart = this.$echarts.init(document.getElementById(id));
      // 绘制图表
      myChart.setOption(
        this.creatOptions(type, { color, axis, chartsData, xData })
      );
      window.onresize = function () {
        myChart.resize();
      };
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '../../../assets/css/varibles.styl'
.rightFour
  width vw(530)
  height vh(222)
  box-sizing border-box
  padding vh(20) 0 vh(10) vh(30)
  background url('/images/right4.png') no-repeat
  background-size cover
  background-size 100% 100%
  display flex
  .list
    display flex
    flex-direction row
    flex-wrap wrap
    .item
      padding vh(10) vw(5)
    .echarts-wrap
      width vw(108)
      height vh(113)
    .echarts-line-wrap
      width vw(123)
      height vh(113)
    p
      font-size vw(14)
      margin-top vh(10)
      text-align center
  .rightThreeLeft
    border-right vw(2) dashed rgb(16, 71, 105)
    box-sizing border-box
    .title
      display flex
      padding-bottom vh(10)
      font-size vw(18)
      .titleImg
        width vw(23)
        height vh(23)
        background url('/images/林.png') no-repeat
        background-size cover
        background-size 100% 100%
        margin-right vw(5)
  .rightThreeRight
    padding-left vw(5)
    .title
      display flex
      padding-bottom vh(10)
      font-size vw(18)
      .titleImg
        width vw(23)
        height vh(23)
        background url('/images/土.png') no-repeat
        background-size cover
        background-size 100% 100%
        margin-right vw(5)
</style>